<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height:100px;
            width:100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- <div id="box" onclick="console.log('111')"></div> -->
    <div id="box"></div>
    <script>
        //事件定义的方法  DOM0级   DOM2级--1种
        //DOM0级   2种
        //原理：给元素的事件句柄属性赋值
        // 绑定同一个事件多次，后面会将前面的覆盖
        // 给元素的没有事件句柄属性，是无法赋值的
        // 都是冒泡阶段触发，无法改变方向

        // box.onclick=function(){
        //     console.log("111");
        // }
        // box.onclick=function(){
        //     console.log("222");
        // }
        // console.dir(box);

        // function show(){
        //     console.log("222");
        // }
        // box.onclick=show;
        // //给元素取消绑定的事件
        // box.onclick=null;

        //DOM2级绑定事件：基于发布订阅设计模式，向事件池中添加方法
        //绑定同一个事件多次，按照添加顺序依次执行
        //任何事件句柄，都可以添加进去
        //都是冒泡阶段触发（默认），可以改变方向（可以改为捕获阶段触发）
        //向事件池中添加方法addEventListener,移除removeEventListener(同一个函数堆)
        
        //addEventListener/removeEventListener(事件句柄,函数,方向)
        //方向：冒泡阶段触发（默认）false     捕获阶段触发 true 

        box.addEventListener("click",function(){
              console.log("111");
        })

        function f2(){
            console.log("222");
        }
        box.addEventListener("click",f2)

        box.removeEventListener("click",f2)

        //IE 了解
        //attachEvent/detachEvent(on+事件句柄,函数)
        //没有第三个参数，方向不可以改变,冒泡阶段触发（默认）

        // box.attachEvent("onclick",function(){
        //       console.log("111");
        // })
        // box.attachEvent("onclick",function(){
        //       console.log("222");
        // })

        //detachEvent 移除
    </script>
</body>
</html>